$(function () {
    //参数设置为全局对象，因为将来筛选和分类都要用
    let x = {
        pagenum: 1, //是 int    页码值
        pagesize: 2, //是 int    每页显示多少条数据
        cate_id: '', //否 string 文章分类的 Id
        state: '', //否 string 文章的状态， 可选值有： 已发布、 草稿
    }
    let layer = layui.layer
    initArticleList()
    //需求1：初始化文章列表，封装成函数，将来复用
    function initArticleList() {
        axios.get('/my/article/list', {
            params: x
        }).then(({
            data: res
        }) => {
            console.log(res);
            if (res.status != 0) {
                return layer.msg(res.message)
            }
            let arr = []
            res.data.forEach(ele => {
                arr.push(`
                    <tr>
                        <td>${ele.title}</td>
                        <td>${ele.cate_name}</td>
                        <td>${formatDate(ele.pub_date)}</td>
                        <td>${ele.state}</td>
                        <td>
                            <a href="/assets/article/article_edit.html?id=${ele.Id}" class="layui-btn  layui-btn-xs">编辑</a>
                            <button data-id="${ele.Id}" class="del-btn layui-btn  layui-btn-xs layui-btn-danger">删除</button>
                        </td>
                    </tr>
                `)
            });
            $('tbody').empty().html(arr.join(''))
            renderPage(res.total)
        })
    }
    //需求2：渲染筛选中的文章类别列表
    let form = layui.form
    initArtCateList()

    function initArtCateList() {
        axios.get('/my/article/cates').then(({
            data: res
        }) => {
            if (res.status != 0) {
                return layer.msg(res.message)
            }
            let arr = ['<option value="">请选择文章所属分类</option>']
            res.data.forEach(ele => {
                if (ele.Id < 0) return
                arr.push(`<option value="${ele.Id}">${ele.name}</option>
                `)
            });
            $('[name=cate_id]').empty().html(arr)
            //form.fender();可以渲染layui中的 select/checkbox/radio
            form.render()
        })
    }

    //需求3：筛选
    $('#searchForm').on('submit', function (e) {
        e.preventDefault()
        //cate_id和state的值修改，根据form表单里面的值修改
        x.cate_id = $('[name=cate_id]').val()
        x.state = $('[name=state]').val()
        //重新渲染  文章列表
        initArticleList()
    })
    //重置
    $('#searchForm').on('reset', function (e) {
        e.preventDefault()
        //cate_id和state的值修改，根据form表单里面的值修改
        x.cate_id = $('[name=cate_id]').val()
        x.state = $('[name=state]').val()
        //重新渲染  文章列表
        initArticleList()
    })
    //需求4:分页
    function renderPage(total) {
        let laypage = layui.laypage
        //执行一个laypage实例
        laypage.render({
            elem: 'pageBox', //注意 这里的pageBox是ID  不用加#
            count: total, //数据总数
            limit: x.pagesize, //每页显示多少条
            curr: x.pagenum, //第几页
            layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
            limits: [2, 3, 5, 10],
            jump: function (obj, first) {
                //obj包含了当前分页的所有参数，比如
                // console.log(obj.curr); 得到当前页，以便向服务端请求对应页的数据
                // console.log(obj.limit); 得到每页显示的条数
                //首次不执行
                if (!first) {
                    //把当前页改变，重新渲染文章列表
                    x.pagenum = obj.curr
                    x.pagesize = obj.limit
                    initArticleList()
                }
            }
        })
    }
    //需求5：删除-事件委托
    $('tbody').on('click', '.del-btn', function () {
        let id = $(this).attr('data-id')
        layer.confirm('确定删除？', {
            icon: 3,
            title: '提示'
        }, function (index) {
            axios({
                url: '/my/article/delete/' + id,
            }).then(({
                data: res
            }) => {
                console.log(res);
                if (res.status != 0) {
                    return layer.msg(res.message)
                }
                layer.msg('删除成功')
                //删除的是服务器那边的数据，页面还有一条，数据没有传输回来，所以还有一条
                //删除ajax成功后，当我们再次发起请求的时候，如果页面中还有一条数据，当前页--
                // if($('.del-btn').length==1 && q.pagenum>=2) q.pagenum--
                $('.del-btn').length == 1 && x.pagenum >= 2 && x.pagenum--
                //刷新页面
                initArticleList()
            })

            layer.close(index);
        });
    })
})